<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">
    </view>
    <view class="inner">

      <view class="eqList">
        <view class="eqLi" v-for="(n,i) in list" :key="i" @click="">
          <view class="eqLi1">
          </view>
          <view class="eqLi2">
            <view class="eqLi21">智水站</view>
            <view class="eqLi22">
              <view class="eqLi22Label">数量：</view>
              <view class="eqLi22Value">4台</view>
            </view>
          </view>
          <view class="eqLi3">¥2000</view>

        </view>
      </view>


    </view>
    <view class="innerNext">
    </view>


    <view class="bottomBtnWrap">
      <view class="info1">押金合计：</view>
      <view class="info2">¥2730</view>
      <view class="bottomBtn" @click="confirm">返回押金</view>
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      chooseDate1: '',
      chooseDate2: '',
      list: [
        { active: false },
        { active: false },
        { active: false },
      ],
      listActiveIndex: -1,
    }
  },
  computed: {
    listAllSelected(){
      return _.every(this.list, (n, i) => {
        return n.active
      })
    },
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    selectAll(){
      let valueNext = _.every(this.list, (n, i) => {
        return n.active
      })
      _.each(this.list, (n, i) => {
        n.active = valueNext ? false : true
      })
    },
    chooseOne(n, i){
      n.active = !n.active
    },
    chooseDate1Change(e){
      this.chooseDate1 = e.detail.value
    },
    chooseDate2Change(e){
      this.chooseDate2 = e.detail.value
    },
    confirm(){
      console.log(`1`, 1)
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #F7F9FB;
}

.innerPre {

}

.inner {
  padding: 24px;
}

.innerNext {

}


.eqList {
  .eqLi {
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
    margin-bottom: 24px;
    padding: 24px;

    display: flex;
    align-items: flex-start;
    .eqLi1 {
      width: 70px;
      height: 113px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      background-color: lightgrey;
    }
    .eqLi2 {
      margin-left: 24px;
      .eqLi21 {
        margin-top: 10px;
        font-size: 32px;
        font-weight: 500;
        color: #000000;
        line-height: 48px;
      }
      .eqLi22 {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .eqLi22Label {
          font-size: 28px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 44px;
        }
        .eqLi22Value {
          font-size: 28px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.8);
          line-height: 44px;

        }
      }
    }


    .eqLi3 {
      margin-left: auto;
      font-size: 32px;
      font-family: MiSans-Demibold, MiSans;
      font-weight: 600;
      color: #000000;
      line-height: 48px;
    }
  }
}

.bottomBtnWrap {
  display: flex;
  align-items: center;

  position: fixed;
  padding: 24px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;


  .info1 {
    font-size: 28px;
    font-weight: 400;
    color: #000000;
    line-height: 48px;
  }
  .info2 {
    font-size: 28px;
    font-weight: 400;
    color: #1F76F9;
    line-height: 48px;
  }
  .bottomBtn {
    background: #1F76F9;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;

    padding: 8px 24px;

    margin-left: auto;

    font-size: 28px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 39px;

    display: flex;
    justify-content: center;
    align-items: center;

  }

}


</style>
